<!--
 * @Description: 饼图
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-11-12 11:34:27
 * @LastEditTime: 2021-12-15 17:19:08
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\EPie.vue
-->
<template>
  <div
    ref="EPie"
    class="e-pie"
  />
</template>
<script>
export default {
  name: 'EPie',
  props: {
    // 图表选项
    option: {
      type: Object,
      required: true
    },
    // 图表数据加载完成
    ready: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      // 图表实例
      chart: null,
      // 图表配置项
      chartOption: {
        color: ['#d1d1d1', '#1890ff', '#f85c62', '#1dc682', '#ffced0'],
        // 鼠标悬停提示
        tooltip: { show: false },
        legend: {
          bottom: '5%',
          height: '30%',
          icon: 'path://M0.5,0.5h9v9h-9V0.5z',
          data: [],
          textStyle: {
            rich: {
              a: {
                fontSize: 12,
                padding: [0, 10, 0, 0],
                fontWeight: 600
              },
              b: {
                fontSize: 12
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '45%'],
            hoverAnimation: false,
            legendHoverLink: false,
            data: [],
            label: {
              normal: {
                formatter: '{d}%',
                show: true,
                position: 'left'
              }
            }
          }
        ]
      }
    }
  },
  watch: {
    ready: {
      handler(v) {
        if (v) {
          this.setChart()
          this.chart.hideLoading()
        } else {
          this.chartLoading()
        }
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * @description: 初始化
     * @param {void}
     * @return {void}
     */
    init() {
      this.chart = this.$echarts.init(this.$refs.EPie)
      // 强行resize一次避免宽度bug
      this.resize()
      if (this.ready) {
        this.setChart()
        this.chart.hideLoading()
      } else {
        this.chartLoading()
      }
      addEventListener('resize', this.resize)
    },
    /**
     * @description: 设置图表
     * @param {void}
     * @return {void}
     */
    setChart() {
      // 设置选项
      const { legendData, seriesData } = this.option
      const option = this.$clone(this.chartOption)
      option.legend.data = legendData
      option.series[0].data = seriesData
      this.chart.setOption(option, true)
    },
    /**
     * @description: 图表加载中
     * @param {void}
     * @return {void}
     */
    chartLoading() {
      // 设置选项
      this.chart.setOption(this.chartOption, true)
      // 等待加载
      this.chart.showLoading({
        text: '正在加载中...',
        color: '#1890ff',
        textColor: '#333333',
        maskColor: '#ffffff',
        zlevel: 0
      })
    },
    /**
     * @description: 响应屏幕变化
     * @param {void}
     * @return {void}
     */
    resize() {
      const itemr = setTimeout(() => {
        this.chart.resize()
        clearTimeout(itemr)
      }, 300)
    }
  },
  beforeDestroy() {
    // 销毁实例
    this.chart.dispose()
    removeEventListener('resize', this.resize)
  }
}
</script>
<style lang="less" scoped>
.e-pie {
  height: 100%;
}
</style>
